<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>Example ul element</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
     
      <div id="main">
        <div v-for="machine in machines">
          <div class="container-fluid machine-contents">
            <draggable :list="machine.jobs"> 
              <transition-group name="list-complete">
                <div v-for="(job, index) in machine.jobs" :key="job.jobNumber" class="list-complete-item">
                  <div>
                    {{ job.jobNumber }}
                  </div>
                  <div>
                    <br>
                    <button v-on:click="removeJob(machine.id, job.jobNumber, machine.jobs, index)">Remove</button>
                  </div> 
                </div>
              </transition-group>
            </draggable>          
          </div>   
        </div>
      </div>
        <script type="text/javascript" src="libs\vue\dist\vue.js"></script>
        <script type="text/javascript" src="libs\Sortable\Sortable.js"></script>
        <script type="text/javascript" src="src\vuedraggable.js"></script>
        <script type="text/javascript" src="script\transition.js"></script>
    </body>
</html>